<template>
    <view class="content">
        <!-- 弹出层组件 -->
        <pure-popup
            :show="show"
            @close="handleClose"
            :header="showHeader"
            :footer="showFooter"
            title="《将进酒》"
            :close="showClose"
            :class="`pure-popup-${position} pure-popup-close-${closePosition}`"
            :stopCloseOnClickOverlay="stopCloseOnClickOverlay"
            :showCancel="showCancel"
            :showConfirm="showConfirm"
        >
            <view class="modal-content">
                <rich-text :nodes="content"></rich-text>
            </view>
            <template #footer>
                <text class="modal-footer"> 作者: 唐·李白 </text>
            </template>
        </pure-popup>

        <a-demo title="基础使用">
            <pure-button text="显示弹出层" @onClick="handleShowBase" class="pure-button-primary"></pure-button>
        </a-demo>

        <a-demo title="显示Header">
            <pure-button text="显示Header" @onClick="handleShowHeader" class="pure-button-success"></pure-button>
        </a-demo>

        <a-demo title="显示Footer">
            <pure-button text="显示Footer" @onClick="handleShowFooter" class="pure-button-danger"></pure-button>
        </a-demo>

        <a-demo title="显示关闭按钮">
            <view class="buttons">
                <pure-button text="显示关闭按钮" @onClick="handleShowClose('right')" class="pure-button-warning"></pure-button>
                <pure-button text="关闭按钮在左" @onClick="handleShowClose('left')" class="pure-button-danger"></pure-button>
                <pure-button text="关闭按钮在下" @onClick="handleShowClose('bottom')" class="pure-button-primary"></pure-button>
                <pure-button text="关闭按钮在上" @onClick="handleShowClose('top')" class="pure-button-success"></pure-button>
            </view>
        </a-demo>

        <a-demo title="显示确认/取消按钮">
            <view class="buttons">
                <pure-button text="显示确认按钮" @onClick="handleShowButton('confirm')" class="pure-button-primary"></pure-button>
                <pure-button text="显示取消按钮" @onClick="handleShowButton('cancel')" class="pure-button-success"></pure-button>
                <pure-button text="显示确认/取消按钮" @onClick="handleShowButton('both')" class="pure-button-danger"></pure-button>
            </view>
        </a-demo>

        <a-demo title="禁止点击遮罩关闭">
            <pure-button text="禁止点击遮罩关闭" @onClick="handleStopCloseOnClickOverlay" class="pure-button-info"></pure-button>
        </a-demo>

        <a-demo title="弹出位置" desc="居中弹出和默认的效果有点差异,默认没有缩放效果,居中弹出右一点缩放效果">
            <view class="buttons">
                <pure-button text="顶部弹出" @onClick="handleShowPosition('top')" class="pure-button-primary"></pure-button>
                <pure-button text="底部弹出" @onClick="handleShowPosition('bottom')" class="pure-button-success"></pure-button>
                <pure-button text="左侧弹出" @onClick="handleShowPosition('left')" class="pure-button-danger"></pure-button>
                <pure-button text="右侧弹出" @onClick="handleShowPosition('right')" class="pure-button-warning"></pure-button>
                <pure-button text="居中弹出" @onClick="handleShowPosition('center')" class="pure-button-info"></pure-button>
            </view>
        </a-demo>

        <!-- 弹出层组件 -->
        <pure-popup :show="showCustom" close header footer title="《将进酒》" class="custom-popup-animation" @close="handleCloseCustom">
            <view class="modal-content">
                <rich-text :nodes="content"></rich-text>
            </view>
            <template #footer>
                <text class="modal-footer"> 作者: 唐·李白 </text>
            </template>
        </pure-popup>

        <a-demo title="自定义过渡动画">
            <pure-button text="自定义过渡动画" @onClick="handleShowCustom" class="pure-button-primary"></pure-button>
        </a-demo>

        <a-demo title="填充一些内容用以演示锁定背景滚动">
            <view class="rows">
                <view class="row" v-for="i in 20" :key="i" :style="`background: var(--pure-theme-${themes[i % 5]})`"></view>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 主题
    const themes = ref(["primary", "success", "danger", "warning", "info"]);

    // 显示状态
    const show = ref(false);
    const showCustom = ref(false);
    const showHeader = ref(false);
    const showFooter = ref(false);
    const showClose = ref(false);
    const stopCloseOnClickOverlay = ref(false);
    const position = ref("center");
    const closePosition = ref("right");
    const showCancel = ref(false);
    const showConfirm = ref(false);

    // 内容
    const content = ref(`
        <p>君不见，黄河之水天上来，奔流到海不复回。</p>
        <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
        <p>人生得意须尽欢，莫使金樽空对月。</p>
        <p>天生我材必有用，千金散尽还复来。</p>
        <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
        <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
        <p>与君歌一曲，请君为我倾耳听。</p>
        <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
        <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
        <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
        <p>主人何为言少钱，径须沽取对君酌。</p>
        <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
    `);

    // 基础使用
    function handleShowBase() {
        showHeader.value = false;
        showFooter.value = false;
        showClose.value = false;
        stopCloseOnClickOverlay.value = false;
        position.value = "center";
        closePosition.value = "right";
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 显示Header
    function handleShowHeader() {
        showHeader.value = true;
        showFooter.value = false;
        showClose.value = false;
        stopCloseOnClickOverlay.value = false;
        position.value = "center";
        closePosition.value = "right";
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 显示Footer
    function handleShowFooter() {
        showHeader.value = true;
        showFooter.value = true;
        showClose.value = false;
        stopCloseOnClickOverlay.value = false;
        position.value = "center";
        closePosition.value = "right";
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 显示关闭按钮
    function handleShowClose(_position) {
        showHeader.value = true;
        showFooter.value = true;
        showClose.value = true;
        stopCloseOnClickOverlay.value = false;
        position.value = "center";
        closePosition.value = _position;
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 显示确认/取消按钮
    function handleShowButton(mode) {
        showHeader.value = true;
        showFooter.value = true;
        showClose.value = false;
        stopCloseOnClickOverlay.value = false;
        position.value = "center";
        if (mode === "confirm") {
            showConfirm.value = true;
            showCancel.value = false;
        } else if (mode === "cancel") {
            showConfirm.value = false;
            showCancel.value = true;
        } else if (mode === "both") {
            showConfirm.value = true;
            showCancel.value = true;
        }
        show.value = true;
    }

    // 禁止点击遮罩关闭
    function handleStopCloseOnClickOverlay() {
        showHeader.value = true;
        showFooter.value = true;
        showClose.value = true;
        stopCloseOnClickOverlay.value = true;
        position.value = "";
        closePosition.value = "right";
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 弹出位置
    function handleShowPosition(_position) {
        showHeader.value = true;
        showFooter.value = true;
        showClose.value = true;
        stopCloseOnClickOverlay.value = false;
        position.value = _position;
        closePosition.value = "right";
        showConfirm.value = false;
        showCancel.value = false;
        show.value = true;
    }

    // 关闭
    function handleClose() {
        show.value = false;
    }

    // 显示自定义过渡动画
    function handleShowCustom() {
        showCustom.value = true;
    }

    // 关闭自定义过渡动画
    function handleCloseCustom() {
        showCustom.value = false;
    }
</script>

<style lang="scss" scoped>
    .content {
        --pure-popup-header-text-align: center;
        --pure-popup-title-font-size: var(--pure-font-size-larger);
        --pure-popup-title-font-weight: 600;
        --pure-popup-footer-text-align: right;
        --pure-popup-footer-font-size: var(--pure-font-size-smaller);
    }

    .modal-content {
        box-sizing: border-box;
        padding: 10px 20px;
        line-height: 2;
        text-align: justify;
        font-size: 0.9em;
    }

    .rows {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    .row {
        height: 40px;
        border-radius: 5px;
        opacity: 0.5;
    }

    .buttons {
        display: flex;
        gap: 10px;
        margin: 10px 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .custom-popup-animation {
        --pure-popup-transition-timing-function: ease-in-out;
        --pure-popup-content-before-show-transform: translate(-50%, -50%) scale(0) rotate(0deg);
        --pure-popup-content-to-show-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
        --pure-popup-content-show-transform: translate(-50%, -50%) scale(1) rotate(0deg);
        --pure-popup-content-before-hide-transform: translate(-50%, -50%) scale(1) rotate(0deg);
        --pure-popup-content-to-hide-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
        --pure-popup-content-hide-transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
</style>
